import React from 'react';
import $ from 'jquery';
require('../../css/btn-bar');

export default class BtnBar extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            show: true,
            itemWidth: {width:0}
        };
        this.initBtn = this.initBtn.bind(this)
    }
    componentWillMount(){
        $(window).bind("resize",this.initBtn);
        this.initBtn()
    }
    initBtn(){
        let childrenLen = this.props.children instanceof Array ? this.props.children.length : (this.props.children?1:0),
            appWidth = $(window).width();
        let btnItemWidth = parseInt(appWidth/childrenLen)+'px';
        this.setState({
            itemWidth : {width:btnItemWidth}
        })
    }
    btnRender(children){
        return children instanceof Array ? (children.map((child,i) => {
            return (<li key={"btn-bar-item"+i} className="btn-bar-item" style={this.state.itemWidth}>
                {this.props.children[i]}
            </li>)
        })):(<li key={"btn-bar-item"+0} className="btn-bar-item" style={this.state.itemWidth}>
            {this.props.children}
        </li>)
    }
    render(){
        return (
            <div className="btn-bar">
                <ul>
                    {this.btnRender(this.props.children)}
                </ul>
            </div>
        )
    }
}

